<template>
  <div class="app-container">
    <div class="container-box">
      <div class="text-primary" style="font-weight: bold">职务类型维护</div>
      <div>
        <el-tabs tab-position="left" style="height: 200px;overflow: auto;">
          <el-tab-pane v-for="(type, typeIndex) in positionOption" :key="typeIndex" :label="type.name">
            <el-popover
              v-for="(tag,tagIndex) in type.children"
              :key="tagIndex"
              v-model="tag.visible"
              placement="top"
              width="160"
            >
              <p>这是一段内容这是一段内容确定删除吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button type="info" size="mini" @click="handleCancel">取消</el-button>
                <el-button type="danger" size="mini" @click="handleDelete">确定</el-button>
              </div>
              <el-tag slot="reference" class="tag" closable type="success" @close="deletePosition(typeIndex, tagIndex)">
                {{ tag.name }}
              </el-tag>
            </el-popover>
            <el-button class="tag" icon="el-icon-plus" size="mini" type="success" circle plain @click="handleAddPosition(type.name)" />
          </el-tab-pane>
        </el-tabs>
        <div style="display: flex;flex-direction: row;">
          <el-button size="mini" type="primary" style="margin-top: 20px" @click="handleTypeOperation('add')">添加</el-button>
          <el-button size="mini" type="danger" style="margin-top: 20px" @click="handleTypeOperation('delete')">删除</el-button>
          <!--          <div>-->
          <!--            <el-button icon="el-icon-refresh-right" type="info" style="margin-top: 20px">撤销</el-button>-->
          <!--            <el-button icon="el-icon-coordinate" type="success" style="margin-top: 20px">保存</el-button>-->
          <!--          </div>-->
        </div>
      </div>
    </div>
    <el-dialog :title="(typeFormOperation === 'add' ? '添加':'删除') + '分类'" :visible.sync="typeFormVisible" width="20%">
      <el-form :model="typeForm">
        <el-form-item label="分类名称" label-width="80px">
          <el-select v-if="typeFormOperation !== 'add'" v-model="typeForm.typeName" placeholder="请选择">
            <el-option
              v-for="item in positionOption"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
          <el-input v-else v-model="typeForm.typeName" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="typeFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateType">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加工种" :visible.sync="positionFormVisible" width="20%">
      <el-form :model="positionForm">
        <el-form-item label="分类名称" label-width="50px" hidden>
          <el-input v-model="positionForm.typeName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="名称" label-width="50px">
          <el-input v-model="positionForm.positionName" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="positionFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addPosition">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPositionOption,
  deletePositionOption,
  addPositionOption,
  addPositionOptionType,
  deletePositionOptionType
} from '@/api/position'

export default {
  name: 'Daily',
  data() {
    return {
      positionOption: [],
      typeFormOperation: 'add',
      typeFormVisible: false,
      typeForm: { typeName: '' },
      deleteTemp: { typeIndex: '', positionIndex: '' },
      deletePopupVisible: false,
      positionFormVisible: false,
      positionForm: { typeName: '', positionName: '' }
    }
  },
  mounted() {
    this.getPositionOption()
  },
  methods: {
    getPositionOption() {
      getPositionOption().then(
        res => {
          const form = Object.assign({}, res.data.items)
          console.log(form)
          for (const i in form) {
            for (const j in form[i].children) {
              form[i].children[j]['visible'] = false
            }
          }
          this.positionOption = form
        })
    },
    handleTypeOperation(type) {
      this.typeFormOperation = type
      this.typeFormVisible = true
      this.typeForm = { typeName: '' }
    },
    updateType() {
      const form = Object.assign(this.typeForm)
      this.typeForm = { typeName: '' }
      if (this.typeFormOperation === 'add') {
        addPositionOptionType(form).then(
          res => {
            if (res.status === 200) {
              this.$message({
                message: '添加成功',
                type: 'success',
                duration: 400
              })
              this.typeFormVisible = false
              this.getPositionOption()
            }
          }
        )
      } else {
        deletePositionOptionType(form).then(
          res => {
            if (res.status === 200) {
              this.$message({
                message: '添加成功',
                type: 'success',
                duration: 400
              })
              this.typeFormVisible = false
              this.getPositionOption()
            }
          }
        )
      }
    },
    handleAddPosition(type) {
      this.positionForm.typeName = type
      console.log(this.positionForm)
      this.positionFormVisible = true
    },
    deletePosition(type, position) {
      this.deleteTemp.typeIndex = type
      this.deleteTemp.positionIndex = position
      this.positionOption[type].children[position].visible = true
    },
    handleDelete() {
      this.handleCancel()
      const form = {
        typeName: this.positionOption[this.deleteTemp.typeIndex].name,
        positionName: this.positionOption[this.deleteTemp.typeIndex].children[this.deleteTemp.positionIndex].name
      }
      deletePositionOption(form).then(
        res => {
          if (res.status === 200) {
            this.$message({
              message: '删除成功',
              type: 'success',
              duration: 400
            })
            this.getPositionOption()
          }
        }
      )
      console.log(form)
      this.deleteTemp = { typeIndex: -1, positionIndex: -1 }
    },
    handleCancel() {
      this.positionOption[this.deleteTemp.typeIndex].children[this.deleteTemp.positionIndex].visible = false
    },
    addPosition() {
      const form = Object.assign({}, this.positionForm)
      addPositionOption(form).then(
        res => {
          if (res.status === 200) {
            this.$message({
              message: '添加成功',
              type: 'success',
              duration: 400
            })
            this.positionFormVisible = false
            this.getPositionOption()
          }
        }
      )
    }
  }
}
</script>

<style scoped>
  .tag{
    margin-left: 20px;
  }
</style>
